<template>
  <div>
    <v-form ref="form" v-model="valid" lazy-validation>
      <v-container>
        <v-row>
          <v-col cols="12" md="4">
            <v-text-field
              v-model="form.name"
              :rules="nameRules"
              :counter="20"
              label="姓名"
              required
            ></v-text-field>
          </v-col>

          <v-col cols="12" md="4">
            <v-text-field
              v-model="form.cardId"
              :rules="cardRules"
              label="身份证号"
              required
            ></v-text-field>
          </v-col>

          <v-col cols="12" md="4">
            <v-btn
              :disabled="!valid"
              color="primary"
              class="mr-4"
              @click="validate"
            >
              查询
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
    <v-divider></v-divider>
    <template class="">
      <v-data-table
        v-model="selected"
        item-key="name"
        :headers="headers"
        :items="desserts"
        :search="search"
        sort-by="cardId"
        class="elevation-1 ma-6"
        show-select
        :loading="loading"
        loading-text="加载数据中... 请稍等"
        :footer-props="{
          itemsPerPageText: '每页数量',
          itemsPerPageOptions: [10, 20, 50, -1],
          itemsPerPageAllText: '全部',
        }"
      >
        <template v-slot:header.name="{ header }">
          {{ header.text.toUpperCase() }}
        </template>
        <template v-slot:top>
          <v-toolbar flat>
            <v-toolbar-title>企业养老保险参保人员</v-toolbar-title>
            <v-divider class="mx-4" inset vertical></v-divider>
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="实时搜索"
              single-line
              hide-details
            ></v-text-field>
            <v-spacer></v-spacer>
            <v-dialog v-model="dialog" max-width="500px">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  :loading="loading3"
                  :disabled="loading3"
                  color="blue-grey"
                  dark
                  class="mb-2 white--text"
                  v-bind="attrs"
                  v-on="on"
                  @click="loader = 'loading3'"
                >
                  打印
                  <v-icon right dark> mdi-cloud-upload </v-icon>
                </v-btn>
              </template>

              <v-card>
                <v-card-title>
                  <span class="headline">{{ formTitle }}</span>
                </v-card-title>

                <v-card-text>
                  <v-container>
                    <v-row v-if="formTitle == '编 辑'">
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field
                          v-model="editedItem.personelNo"
                          :label="headers[0].text"
                        ></v-text-field>
                      </v-col>

                      <v-col cols="12" sm="6" md="4">
                        <v-text-field
                          v-model="editedItem.name"
                          :label="headers[1].text"
                        ></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field
                          v-model="editedItem.cardId"
                          :label="headers[2].text"
                        ></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field
                          v-model="editedItem.companyName"
                          :label="headers[3].text"
                        ></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="4">
                        <v-text-field
                          v-model="editedItem.tong_time"
                          :label="headers[4].text"
                        ></v-text-field>
                      </v-col>
                    </v-row>
                    <v-row v-else>{{ selected }}</v-row>
                  </v-container>
                </v-card-text>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" text @click="close">
                    取消
                  </v-btn>
                  <v-btn color="success darken-1" text @click="save">
                    确认
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            <!-- <v-dialog v-model="dialogDelete" max-width="500px">
              <v-card>
                <v-card-title class="headline"
                  >Are you sure you want to delete this item?</v-card-title
                >
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" text @click="closeDelete"
                    >Cancel</v-btn
                  >
                  <v-btn color="blue darken-1" text @click="deleteItemConfirm"
                    >OK</v-btn
                  >
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-card>
            </v-dialog> -->
          </v-toolbar>
        </template>

        <template v-slot:item.actions="{ item }">
          <v-icon small class="mr-2" @click="editItem(item)">
            mdi-pencil
          </v-icon>
          <!-- <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon> -->
        </template>
        <template v-slot:no-data>
          <!-- <v-btn color="primary" @click="initialize"> 重置 </v-btn> -->
          <div class="ma-6">请输入相关数据，然后点击查询</div>
        </template>
      </v-data-table>
    </template>
  </div>
</template>

<script>
import getData from "../plugins/getData.js";

export default {
  data: () => ({
    loading3: false,
    //table
    loading: false,
    search: "",
    selected: [],
    dialog: false,
    dialogDelete: false,
    headers: [
      {
        text: "人员编号",
        align: "start",
        sortable: false,
        value: "personelNo",
      },
      { text: "姓名", value: "name" },
      { text: "身份证号", value: "cardId" },
      { text: "参保企业名称", value: "companyName" },
      { text: "时间", value: "tong_time" },
      { text: "操作", value: "actions", sortable: false },
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      name: "",
      cardId: 0,
      companyName: 0,
      tong_time: 0,
      personelNo: 0,
    },
    defaultItem: {
      name: "0",
      cardId: 0,
      companyName: 0,
      tong_time: 0,
      personelNo: 0,
    },
    //form
    valid: false,
    form: {
      name: "",
      cardId: "",
    },
    nameRules: [
      (v) => !!v || "请输入姓名",
      (v) => v.length <= 20 || "姓名最长为20个字符",
    ],
    cardRules: [(v) => !!v || "请输入正确的身份证号"],
  }),
  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "打 印" : "编 辑";
    },
  },

  watch: {
    dialog(val) {
      val || this.close();
    },
    dialogDelete(val) {
      val || this.closeDelete();
    },
  },

  created() {
    //this.initialize();
  },

  methods: {
    async validate() {
      this.$refs.form.validate();
      if (this.form.name && this.form.cardId) {
        //console.log(this.form);
        //查询请求
        var task = await getData(this.form);
        if (typeof task == "object") {
          this.desserts = task;
        } else {
          console.log(task);
        }
      }
    },
    initialize() {
      this.desserts = [
        {
          personelNo: 330681,
          name: "李四",
          cardId: 321321199710057015,
          companyName: "阿里巴巴电子商务（杭州）有限公司",
          tong_time: "2020-09-28 19:18:58.0",
        },
        {
          personelNo: 330683,
          name: "赵六",
          cardId: 321321199710057015,
          companyName: "腾讯网络科技（深圳）有限公司",
          tong_time: "2020-09-28 19:18:58.0",
        },
      ];
    },

    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialogDelete = true;
    },

    deleteItemConfirm() {
      this.desserts.splice(this.editedIndex, 1);
      this.closeDelete();
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    closeDelete() {
      this.dialogDelete = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        //this.desserts.push(this.editedItem);
      }
      this.close();
    },
  },
};
</script>